<template>
	<view class="control">
		<view class="item">
			<view class="item-title">预约私教课</view>
			<view class="flex-space-between">
				<input class="value" placeholder="请填写" v-model="formData.className"/>
				<!-- <van-icon name="arrow" size="30rpx" color="rgb(153,153,153)" /> -->
			</view>
		</view>
		<view class="item">
			<view class="item-title">预约私教课节</view>
			<view class="flex-space-between">
				<input class="value" placeholder="请填写" v-model="formData.classItem"/>
				<!-- <van-icon name="arrow" size="30rpx" color="rgb(153,153,153)" /> -->
			</view>
		</view>
		<view class="item">
			<view class="item-title">预约日程</view>
			<view class="flex-space-between time-cell">
				<view class="time" @click="openDateAlert(0)">
					{{formData.startDate ? filterDate(formData.startDate) : '请选择' }}
				</view>
				<view>至</view>
				<view class="time" @click="openDateAlert(1)">
					{{formData.endDate ? filterDate(formData.endDate) : '请选择' }}
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item-title">预约日期</view>
			<view class="flex-space-between week-list">
				<view class="week-item" :class="{'active':weekSelect.includes(item)}" v-for="item in weekList"
					:key="item" @click="handSelect(item)">
					{{item}}
				</view>
				<view class="check">
					<van-checkbox :value="isAllSelect" @change="handAllSelect" label-position="left" icon-size="32rpx"
						shape="square" checked-color="#655ff7">
						全选
					</van-checkbox>
				</view>
			</view>
		</view>
		<!-- 预约时间段 -->
		<view class="item sub-item" v-for="(item,index) in subTineList" :key="index">
			<view class="flex-space-between">
				<view class="item-title">预约时间段{{index +1}}</view>
				<view class="item-title">人数</view>
			</view>
			<view class="flex-space-between bottom">
				<view class="sub-value flex-align">
					<view @click="openTimeAlert(0,index)">{{item.startTime ? item.startTime :'请选择' }}</view>
					<view class="hr">至</view>
					<view @click="openTimeAlert(1,index)">{{item.endTime ? item.endTime :'请选择' }}</view>
				</view>
				<view class="sub-value flex-align">
					<input type="number" v-model="item.num"/>人
				</view>
				<view class="close" @click="removeSubTime(index)">
					<van-icon  name="cross" size="34rpx" color="rgb(153,153,153)" />
				</view>
			</view>
		</view>
		
		<view class="add flex-center">
			<van-icon @click='addSubTime' name="add-o" size="56rpx" color="#6b65f7"/>
		</view>
		
		<view class="footer">
			<view class="btn" @click="submit">立即发布</view>
		</view>
		
		
		<!-- 年月日时间弹框 -->
		<van-popup :show="showDate" round position="bottom" @close="showDate = false">
			<van-datetime-picker
			  type="date"
			  :value="new Date().getTime()"
			  @cancel="showDate = false"
			  @confirm="configDate"
			/>
		</van-popup>
		<!-- 时间 -->
		<van-popup :show="showTime" round position="bottom" @close="showTime = false">
			<van-datetime-picker
			  type="time"
			  :value="currentDate"
			  :min-hour="0"
			  :max-hour="23"
			   @cancel="showTime = false"
			  @confirm="configTime"
			/>
		</van-popup>
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import {formatDate} from "@/utils/util.js"
	import Toast from "@/wxcomponents/vant/dist/toast/toast"
	export default {
		data() {
			return {
				weekList: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
				isAllSelect: false, //是否全选
				weekSelect: [], //选中的
				subTineList: [ //预约时间段
					{
						startTime: '', //开始时间
						endTime: '', //结束时间
						num: 0, //人数
					}
				],
				formData:{
					className:'',  //私教课程名称
					classItem:'', //课节,
					startDate:'',//预约日期开始
					endDate:'',//预约日期结束
				},
				dateState:0, //0是选择开始日期，1是结束日期
				showDate:false,//年月日弹窗
				showTime:false,//时间弹窗
				currentDate: formatDate(new Date().getTime(),'hh:mm'),
				timeIndex:0,//预约时间段选中id
			}
		},
		methods: {
			handAllSelect(event) {
				this.isAllSelect = event.detail
				if (this.isAllSelect) {
					this.weekSelect = ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
				} else {
					this.weekSelect = []
				}
			},
			handSelect(data) {
				if (this.weekSelect.includes(data)) {
					this.weekSelect = this.weekSelect.filter((item) => {
						return item !== data
					})
				} else {
					this.weekSelect.push(data)
				}
			},
			//选中年月日
			configDate(event){
				// let time = formatDate(event.detail,'YYYY/MM/DD hh:mm:ss')
				if(this.dateState === 0){
					this.formData.startDate = event.detail
				}else{
					this.formData.endDate = event.detail
				}
				this.showDate = false
			},
			//打开年月日
			openDateAlert(index){
				this.dateState = index
				this.showDate = true
			},
			openTimeAlert(state,index){
				this.dateState = state
				this.showTime = true
				this.timeIndex = index
			},
			//选中时间
			configTime(event){
				let time = event.detail
				if(this.dateState === 0){
					this.subTineList[this.timeIndex].startTime = time
				}else{
					this.subTineList[this.timeIndex].endTime = time
				}
				this.showTime = false
				
			},
			//新增
			addSubTime(){
				this.subTineList.push({
					startTime: '', //开始时间
					endTime: '', //结束时间
					num: 0, //人数
				})
			},
			//删除
			removeSubTime(indexs){
				this.subTineList = this.subTineList.filter((item,index) => {
					return index !== indexs
				})
			},
			submit(){
				console.log(this.subTineList,'subTineList')
				if(!this.formData.className){
					Toast("请填写预约私教课")
				}else if(!this.formData.classItem){
					Toast("请填写预约私教课节")
				}else if(!this.formData.startDate){
					Toast("请填写开始预约日程")
				}else if(!this.formData.endDate){
					Toast("请填写结束预约日程")
				}else if(this.weekSelect.length === 0){
					Toast("请选择预约日期")
				}else{
					uni.navigateTo({
						url:"/page_admin/coach-side/class-home/class-deail/class-deail"
					})
				}
			}
		},
		computed:{
			//修改时间格式
			filterDate(){
				return (value) => {
					return formatDate(parseInt(value),'YYYY/MM/DD')
				}
			}
		}

	}
</script>

<style scoped lang="scss">
	.control {
		width: 100%;
		height: 100vh;
		overflow: auto;
		padding-bottom: 160rpx;

		.item {
			padding: 29rpx 30rpx 30rpx;
			border-bottom: solid 2rpx rgb(239, 239, 239);

			.item-title {
				color: rgb(153, 153, 153);
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 20rpx;
			}

			.value {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
			}

			.time-cell {
				color: rgb(51, 51, 51);
				font-size: 28rpx;
				font-weight: 500;
				justify-content: flex-start;

				.time {
					width: 49%;

					&:last-of-type {
						margin-left: 20rpx;
					}
				}
			}

			.week-list {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				grid-gap: 20rpx;
				position: relative;

				.week-item {
					padding: 15rpx 0;
					background-color: rgb(243, 243, 243);
					border-radius: 5rpx;
					text-align: center;
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					font-weight: 500;
					border: solid 2rpx transparent;
					box-sizing: border-box;
				}

				.active {
					color: rgb(99, 93, 247);
					background-color: rgba(99, 93, 247, 0.2);
					border: solid 2rpx rgb(99, 93, 247);
					position: relative;

					&:before {
						display: block;
						content: '';
						position: absolute;
						width: 27rpx;
						height: 28rpx;
						right: -2rpx;
						bottom: -2rpx;
						background-image: url("https://jiangsudiantuo2022.oss-cn-hangzhou.aliyuncs.com/img/46b1cc85fcb0fd76095daf823b7d2bb4a3235519.png");
						background-repeat: no-repeat;
						background-size: 100%;
					}
				}

				.check {
					color: rgb(51, 51, 51);
					font-size: 24rpx;
					position: absolute;
					bottom: 10rpx;
					right: 0;
				}
			}
		}

		.sub-item {
			.item-title {
				width: 45%;
			}

			.bottom {
				position: relative;
				.close{
					position: absolute;
					right: 0;
				}
				.sub-value {
					width: 45%;
					color: rgb(51, 51, 51);
					font-size: 28rpx;
					font-weight: 500;

					.hr {
						margin: 0 16rpx;
					}

					input {
						width: 80rpx;
						padding-right: 20rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			z-index: 2;
			background-color: white;
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			box-shadow: 0px -8rpx 51rpx rgba(0, 0, 0, 0.04);

			.btn {
				color: rgb(255, 255, 255);
				background-image: linear-gradient(0deg, rgb(99, 93, 247) 0%, rgb(165, 173, 246) 100%);
				border-radius: 60rpx;
				padding: 26rpx 0;
				font-size: 30rpx;
				text-align: center;
				font-weight: 700;
			}

		}
		
		.add{
			margin-top: 30rpx;
		}
	}
</style>
